<template>
  <div class="play_page">
    <!-- 背景图 -->
    <div class="bg_img" :style="`background-image: url(${imgUrl})`"></div>
    <!-- 返回 -->
    <i @click="to_home" class="iconfont icon-jiantou"></i>
    <!-- 碟片 -->
    <disc></disc>
    <!-- 歌词 -->
    <div class="word_wrap">
      <word></word>
    </div>
    <!-- 播放控件 -->
    <footer>
      <progress-bar></progress-bar>
    </footer>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Disc from "@/components/playpage/Disc";
import ProgressBar from "@/components/playpage/ProgressBar";
import Word from "@/components/playpage/Word";
export default {
  name: "PlayPage",
  components: {
    Disc,
    ProgressBar,
    Word,
  },
  computed: {
    // 歌曲id,歌曲图片
    ...mapState(["song_id", "imgUrl"]),
  },
  async created() {
    // 获取歌词，并进行处理
    if (this.song_id === 0) {
      let current_id = this.$route.params.id;
      this.$audio.playSong(current_id);
      // 将当前 歌曲所在列表的 id 集合存至仓库内作为播放列表
      this.$store.commit("set_play_list", [current_id]);
      // 改变 vuex 内歌曲的下标
      this.$store.commit("change_idx", 0);
    }
  },
  methods: {
    // 歌词
    ...mapActions(["get_song_lyric"]),
    // 跳转Home页面
    to_home() {
      this.$router.push({
        name: "Home",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.play_page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .bg_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    transform: scale(1.5);
    z-index: -99;
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.5);
    }
  }
  .icon-jiantou {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #fff;
    transform: rotate(90deg);
    font-size: 34px;
  }
  .word_wrap {
    position: absolute;
    left: 0;
    top: 52vh;
    width: 100vw;
    text-align: center;
    color: #fff;
  }
  footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 16vh;
    color: #fff;
  }
}
</style>
